<template>
  <div>
    <a-table :pagination="false" :data-source="state.dataSource" :columns="columns" rowKey="id">
      <template #handler="{ record }">
        <a @click="del(record)">解除关联</a>
      </template>
      <template #type="{ record }">
        {{ typeMap[record.type] }}
      </template>
    </a-table>
    <a-row style="margin-top: 20px" type="flex" justify="end">
      <a-pagination
        show-quick-jumper
        showSizeChanger
        v-model:pageSize="pagination.limit"
        v-model:current="pagination.page"
        :total="pagination.total"
        :showTotal="() => `共 ${pagination.total} 条数据`"
        @change="getList"
        @showSizeChange="getList"
      />
    </a-row>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive } from 'vue';
import { apiDissociated, apiGetArticleLinkCol } from '@/api/articleManage';
import { message } from 'ant-design-vue';
const columns = [
  {
    title: '关联位置',
    dataIndex: 'type',
    slots: {
      customRender: 'type',
    },
  },
  {
    title: '栏目名称',
    dataIndex: 'columnName',
    slots: {
      customRender: 'columnName',
    },
  },
  {
    title: '操作',
    dataIndex: 'handler',
    slots: {
      customRender: 'handler',
    },
  },
];
const typeMap = {
  1: '菜单帮助',
  2: '帮助中心',
  3: '公告',
};
export default defineComponent({
  name: '',
  props: {
    articleId: {
      type: Number,
      requried: true,
      default: 0,
    },
  },
  setup(props) {
    const { articleId } = toRefs(props);

    // 分页数据
    const pagination = reactive({ limit: 10, page: 1, total: 0 });

    /**
     * 获取列表
     **/
    const state = reactive({ loading: false, dataSource: [] });
    const getList = async () => {
      try {
        state.loading = true;
        const { pageInfo } = await apiGetArticleLinkCol({
          page: pagination.page,
          limit: pagination.limit,
          articleId: articleId.value,
        });
        state.dataSource = pageInfo.list;
        pagination.total = pageInfo.total;
      } finally {
        state.loading = false;
      }
    };
    getList();

    /**
     * 解除关联
     **/
    const del = form => {
      const { columnId, articleId, type } = form;
      apiDissociated({ columnId, articleId, type }).then(() => {
        message.success('解除成功');
        getList();
      });
    };

    return {
      columns,
      state,
      del,
      pagination,
      typeMap,
      getList,
    };
  },
});
</script>
